<template>
  <view class="container">
    <view class="user-info">
      <!-- 头像部分 -->
      <view class="avatar-section" >
        <image class="avatar" :src="avatar" mode="aspectFill"></image>
        <!-- <text class="tip-text" @click="upimg">点击获取微信头像</text> -->
      </view>
	 <button open-type="chooseAvatar" @chooseavatar="upavatar">点击获取微信头像</button>
	 <view style="padding-top: 20rpx;">
		 <input type="nickname" v-model="nickName" placeholder="点击获取微信昵称"/> 
	 </view>
      
      <!-- 昵称部分 -->
<!--      <view class="nickname-section" @click="getWechatUserInfo">
        <text class="label">昵称：</text>
        <view class="nickname">{{userInfo.nickName || '点击获取微信昵称'}}</view>
      </view> -->
    </view>
	<view class="sign-btn" @click="upload">
	  <text>保存</text>
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: '',
	  nickName:'',
	  avatar:'',
	  file:'',
    }
  },
  onLoad() {
  	this.userInfo=uni.getStorageSync("userInfo")
	console.log(this.userInfo)
	//this.nickName=this.userInfo.realname
	console.log(this.nickName)
  },
  methods: {
	upload (){
		//console.log(this.nickName)
		var nickName=''
		if(this.nickName){
			nickName=this.nickName
		}else{
			 nickName=this.userInfo.realname
		}
		var avatar=''
		if(this.avatar){
			avatar=this.avatar
		}else{
			avatar=this.userInfo.avatar
		}
		uni.showLoading({
			title: '加载中'
		})
		this.$http('jeecg-boot/api/wx/updateUserInfo',{
				  // leaderId:this.userInfo.id
				 realname:nickName,
				 avatar:avatar
		},'POST').then(res => {
			  uni.hideLoading();
			  if(res.success){
				  uni.showToast({
				   title: res.message,
				   icon:'none',
				   duration: 3000
				  });
				  this.userInfo.avatar=avatar
				  this.userInfo.realname=nickName
				  uni.setStorageSync('userInfo', this.userInfo)
			  }
		})
	},
	upimg(){
	  var that=this;
	  uni.chooseImage({
	  	sourceType: ['album','camera'],
	  	count:1, 
	  	success: (chooseImageRes) => {	
			console.log(chooseImageRes)
			const tempFilePaths = chooseImageRes.tempFilePaths;
			that.file=tempFilePaths[0]
			that.wxupload()
		}
		})
	},
	wxupload(){
		/* this.$http('jeecg-boot/api/wx/upload',{
			file:this.file	 
		},'POST').then(res => {
			 
			 
		}) */
		var that=this
		var token= uni.getStorageSync("token")
		uni.uploadFile({
		       url:'https://www.datiepen.com/jeecg-boot/api/wx/upload', 
		       filePath: that.file,
		       name: 'file', 
		       formData: {
		           'file': that.file
		       },
			   header:{
				   'x-access-token':token
			   },
		       success: (uploadFileRes) => {
				   uni.hideLoading();
		           console.log(JSON.parse(uploadFileRes.data).result );
				   that.avatar= JSON.parse(uploadFileRes.data).result
				   console.log( that.avatar)
				   /* if(JSON.parse(uploadFileRes.data).code==0){
					   	that.vin = JSON.parse(uploadFileRes.data).data;
						that.queryCarModelGroupByVin()
				   }else{
					   uni.showToast({
					   	title: JSON.parse(uploadFileRes.data).msg,
					   	icon: 'none',
					   	duration: 2000,
					   });
				   } */
				   	
		       }
		   });
	},
	upavatar(e){
		console.log(e)
		this.file=e.detail.avatarUrl
		var that=this
		var token= uni.getStorageSync("token")
		uni.uploadFile({
		       url:'https://www.datiepen.com/jeecg-boot/api/wx/upload', 
		       filePath: that.file,
		       name: 'file', 
		       formData: {
		           'file': that.file
		       },
			   header:{
				   'x-access-token':token
			   },
		       success: (uploadFileRes) => {
				   uni.hideLoading();
		           console.log(JSON.parse(uploadFileRes.data) );
				    that.avatar= JSON.parse(uploadFileRes.data).result
				   /* if(JSON.parse(uploadFileRes.data).code==0){
					   	that.vin = JSON.parse(uploadFileRes.data).data;
						that.queryCarModelGroupByVin()
				   }else{
					   uni.showToast({
					   	title: JSON.parse(uploadFileRes.data).msg,
					   	icon: 'none',
					   	duration: 2000,
					   });
				   } */
				   	
		       }
		   });
	},
    // 获取微信用户信息
    getWechatUserInfo() {
      // 微信小程序获取用户信息
      // #ifdef MP-WEIXIN
      uni.getUserProfile({
        desc: '用于展示用户信息',
        success: (res) => {
          console.log('获取用户信息成功', res)
          this.userInfo = {
            avatarUrl: res.userInfo.avatarUrl,
            nickName: res.userInfo.nickName
          }
          // 保存到本地
         // uni.setStorageSync('userInfo', this.userInfo)
        },
        fail: (err) => {
          console.log('获取用户信息失败', err)
          uni.showToast({
            title: '获取信息失败',
            icon: 'none'
          })
        }
      })
      // #endif
      
      // 其他平台处理
      // #ifndef MP-WEIXIN
      uni.showToast({
        title: '此功能仅支持微信小程序',
        icon: 'none'
      })
      // #endif
    },
    
    
  },
 
}
</script>

<style>
.container {
  padding: 30rpx;
  background-color: #f7f7f7;
  min-height: 100vh;
}

.user-info {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;
}

.avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  border: 2rpx solid #eee;
}

.tip-text {
  font-size: 24rpx;
  color: #999;
  margin-top: 16rpx;
}

.nickname-section {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.label {
  font-size: 30rpx;
  color: #333;
  width: 120rpx;
}

.nickname {
  flex: 1;
  font-size: 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  color: #333;
}
/* 签到按钮 */
.sign-btn {
  width: 80%;
  height: 100rpx;
  background: linear-gradient(to right, #ff5e5e, #ff2d2d);
  border-radius: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
  box-shadow: 0 10rpx 20rpx rgba(255, 45, 45, 0.3);
  margin-top: 40rpx;
  position: fixed;
  bottom: 80rpx;
  left: 10vw;
}

.sign-btn:active {
  opacity: 0.9;
  transform: scale(0.98);
}
</style>